﻿.uif {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
    height: 100%;
}

    .uif .tab-title {
        display: block;
    }

        .uif .tab-title > li {
            display: block;
            text-align: center;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            margin: 3px 0;
            color: #6e6e6e;
            border: 1px solid #ddd;
            position: relative;
            box-sizing: border-box;
            transition: border-color 0.5s;
            font-size: 0.9rem;
        }

            .uif .tab-title > li:hover {
                border-color: #bbb;
            }

        .uif .tab-title .this {
            border-left-style: none;
            color: #ffb700;
        }

            .uif .tab-title .this::before {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                border-left: 4px solid #ffb700;
            }

    .uif .panel {
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        padding: 10px 0;
        box-sizing: border-box;
    }

    .uif .panel-lef {
        width: 20%;
        padding: 5px;
        /*box-shadow: 2px 1px 6px #ccc;*/
        border: 1px solid #ddd;
        border-radius: 10px;
        padding-top: 10px;
    }

    .uif .panel-rig {
        flex-grow: 1;
        border: 1px solid #ddd;
        border-radius: 10px;
        margin-left: 5px;
        height:600px;
    }

    .uif .userblk {
        height: 160px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        /*background-image: linear-gradient( 135deg, #FFE985 10%, #FA742B 100%);*/
    }

    .uif .editbx {
        margin: 3px 0;
        text-align: center;
    }

    .uif .userblk .headimg {
        width: 100px;
        height: 100px;
        border: 5px solid #e1e0dc;
    }

    .uif .userblk .idbx {
        position: absolute;
        top: 5px;
        right: 8px;
        color: white;
    }

    .uif .userblk .uname {
        font-weight: bold;
        font-size: 1.3rem;
        color: #555;
    }

    .uif .userblk .sex {
        font-size: 1.1rem;
        font-weight: bold;
    }

    .uif .userblk .layui-icon-male {
        color: deepskyblue;
    }

    .uif .userblk .layui-icon-female {
        color: pink;
    }

    .uif .userblk .myrem {
        color: #ff9000;
        font-weight: bold;
    }

    .uif .userblk .pay,
    .uif .userblk #paynow {
        font-size: 0.8rem;
        color: deepskyblue;
        cursor: pointer;
    }

        .uif .userblk #paynow:hover {
            text-decoration: underline;
        }

    .uif .panel-rig .tab-content {
        width: 100%;
        height: 100%;
    }

        .uif .panel-rig .tab-content .tab-page {
            display: none;
            height: 100%;
        }

        .uif .panel-rig .tab-content > .show {
            display: block;
        }

    /*生涯*/
    .uif .other {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

        .uif .other .cenbox {
            width: 70%;
            height: 70%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
        }

        .uif .other .item {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }

            .uif .other .item .flg {
                width: 130px;
                height: 130px;
                position: relative;
                /*border: 1px solid orange;*/
                display: flex;
                justify-content: center;
                align-items: stretch;
                flex-direction: column;
                box-shadow: 2px 2px 4px #ccc;
                border-radius: 50%;
                background-color: white;
                box-sizing: border-box;
                /*box-shadow: 0.66913px 0.74314px 0 #999, 1.33826px 1.48629px 0 #9a9a9a, 2.00739px 2.22943px 0 #9b9b9b, 2.67652px 2.97258px 0 #9c9c9c, 3.34565px 3.71572px 0 #9d9d9d, 4.01478px 4.45887px 0 #9e9e9e, 4.68391px 5.20201px 0 #9f9f9f, 5.35304px 5.94516px 0 #a09f9f, 6.02218px 6.6883px 0 #a0a0a0, 6.69131px 7.43145px 0 #a1a1a1, 7.36044px 8.17459px 0 #a2a2a2, 8.02957px 8.91774px 0 #a3a3a3, 8.6987px 9.66088px 0 #a4a4a4, 9.36783px 10.40403px 0 #a5a5a5, 10.03696px 11.14717px 0 #a6a6a6, 10.70609px 11.89032px 0 #a7a6a6, 11.37522px 12.63346px 0 #a7a7a7, 12.04435px 13.37661px 0 #a8a8a8, 12.71348px 14.11975px 0 darkgray, 13.38261px 14.8629px 0 #aaa, 14.05174px 15.60604px 0 #ababab, 14.72087px 16.34919px 0 #acacac, 15.39px 17.09233px 0 #adadad, 16.05913px 17.83548px 0 #aeadad, 16.72827px 18.57862px 0 #afaeae, 17.3974px 19.32177px 0 #afafaf, 18.06653px 20.06491px 0 #b0b0b0, 18.73566px 20.80806px 0 #b1b1b1, 19.40479px 21.5512px 0 #b2b2b2, 20.07392px 22.29434px 0 #b3b3b3, 20.74305px 23.03749px 0 #b4b3b3, 21.41218px 23.78063px 0 #b5b4b4, 22.08131px 24.52378px 0 #b6b5b5, 22.75044px 25.26692px 0 #b6b6b6, 23.41957px 26.01007px 0 #b7b7b7, 24.0887px 26.75321px 0 #b8b8b8, 24.75783px 27.49636px 0 #b9b9b9, 25.42696px 28.2395px 0 #bababa, 26.09609px 28.98265px 0 #bbbaba, 26.76522px 29.72579px 0 #bcbbbb, 27.43435px 30.46894px 0 #bdbcbc, 28.10349px 31.21208px 0 #bdbdbd, 28.77262px 31.95523px 0 #bebebe, 29.44175px 32.69837px 0 #bfbfbf, 30.11088px 33.44152px 0 silver, 30.78001px 34.18466px 0 #c1c1c1, 31.44914px 34.92781px 0 #c2c1c1, 32.11827px 35.67095px 0 #c3c2c2, 32.7874px 36.4141px 0 #c4c3c3, 33.45653px 37.15724px 0 #c5c4c4, 34.12566px 37.90039px 0 #c5c5c5, 34.79479px 38.64353px 0 #c6c6c6, 35.46392px 39.38668px 0 #c7c7c7, 36.13305px 40.12982px 0 #c8c7c7, 36.80218px 40.87297px 0 #c9c8c8, 37.47131px 41.61611px 0 #cac9c9, 38.14044px 42.35926px 0 #cbcaca, 38.80958px 43.1024px 0 #cccbcb, 39.47871px 43.84554px 0 #ccc, 40.14784px 44.58869px 0 #cdcdcd, 40.81697px 45.33183px 0 #cecece, 41.4861px 46.07498px 0 #cfcece, 42.15523px 46.81812px 0 #d0cfcf, 42.82436px 47.56127px 0 #d1d0d0, 43.49349px 48.30441px 0 #d2d1d1, 44.16262px 49.04756px 0 #d3d2d2, 44.83175px 49.7907px 0 lightgray, 45.50088px 50.53385px 0 #d4d4d4, 46.17001px 51.27699px 0 #d5d5d5, 46.83914px 52.02014px 0 #d6d5d5, 47.50827px 52.76328px 0 #d7d6d6, 48.1774px 53.50643px 0 #d8d7d7, 48.84653px 54.24957px 0 #d9d8d8, 49.51566px 54.99272px 0 #dad9d9, 50.1848px 55.73586px 0 #dbdada, 50.85393px 56.47901px 0 #dbdbdb, 51.52306px 57.22215px 0 #dcdbdb, 52.19219px 57.9653px 0 #dddcdc, 52.86132px 58.70844px 0 #dedddd, 53.53045px 59.45159px 0 #dfdede, 54.19958px 60.19473px 0 #e0dfdf, 54.86871px 60.93788px 0 #e1e0e0, 55.53784px 61.68102px 0 #e2e1e1, 56.20697px 62.42417px 0 #e2e2e2, 56.8761px 63.16731px 0 #e3e2e2, 57.54523px 63.91045px 0 #e4e3e3, 58.21436px 64.6536px 0 #e5e4e4, 58.88349px 65.39674px 0 #e6e5e5, 59.55262px 66.13989px 0 #e7e6e6, 60.22175px 66.88303px 0 #e8e7e7, 60.89089px 67.62618px 0 #e9e8e8, 61.56002px 68.36932px 0 #e9e9e9, 62.22915px 69.11247px 0 #eae9e9, 62.89828px 69.85561px 0 #ebeaea, 63.56741px 70.59876px 0 #ecebeb, 64.23654px 71.3419px 0 #edecec, 64.90567px 72.08505px 0 #eeeded, 65.5748px 72.82819px 0 #efeeee, 66.24393px 73.57134px 0 #f0efef, 66.91306px 74.31448px 0 #f1f0f0;*/
            }


                .uif .other .item .flg:before {
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0.5%;
                    top: 0.5%;
                    width: 99%;
                    height: 99%;
                    border-radius: 50%;
                    border: 2px solid #f4ff00;
                    border-left-style: none;
                    border-bottom-style: none;
                    animation: rotate 3s infinite linear;
                    box-sizing: border-box;
                }

            .uif .other .item:nth-of-type(1) .flg:before {
                animation-delay: 0.5s;
            }

            .uif .other .item:nth-of-type(2) .flg:before {
                animation-delay: 1s;
            }

            .uif .other .item:nth-of-type(3) .flg:before {
                animation-delay: 1.5s;
            }

            .uif .other .item:nth-of-type(4) .flg:before {
                animation-delay: 2s;
            }

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.uif .other .item .flg > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.uif .other .item .flg .title span {
    font-size: 1.3rem;
    font-weight: bold;
    color: orange;
}

.uif .other .item .flg .content span {
    color: #666;
    font-size: 0.9rem;
}

.uif .panel-rig .tab-page {
    box-sizing: border-box;
}

.uif .panel-rig .laypage {
    width: 100%;
    height: 5%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.uif .panel-rig .favlist{
    width:100%;
    height:95%;
}
.uif .panel-rig .sclist {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4,190px);
    grid-column-gap: 7px;
    box-sizing: border-box;
    overflow: hidden;
}

    .uif .panel-rig .sclist::after {
        content: "";
        display: block;
        flex-grow: 1;
    }

    .uif .panel-rig .sclist > li {
        border: 1px solid #ddd;
        height: 260px;
        margin-bottom: 10px;
        margin-right: 20px;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-direction: column;
        box-sizing: border-box;
        padding: 8px;
        box-shadow: 1px 1px 4px #ccc;
        position: relative;
        overflow: hidden;
    }

        .uif .panel-rig .sclist > li b {
            font-weight: bold;
        }

        .uif .panel-rig .sclist > li .imgbx img {
            width: 100%;
            height: 150px;
        }

        .uif .panel-rig .sclist > li .circleProgbar .content {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .uif .panel-rig .sclist > li .gdtitbx {
            height: 36px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

            .uif .panel-rig .sclist > li .gdtitbx a {
                font-size: 0.7rem;
                color: #444;
            }

        .uif .panel-rig .sclist > li .pricbx {
            font-size: 0.8rem;
            margin-bottom: 5px;
        }

            .uif .panel-rig .sclist > li .pricbx > b {
                font-size: 1.1rem;
                color: red;
            }

        .uif .panel-rig .sclist > li .btnbx {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

            .uif .panel-rig .sclist > li .btnbx button {
                height: 25px;
                line-height: 25px;
            }

            .uif .panel-rig .sclist > li .btnbx .btn-go {
                width: 120px;
            }

            .uif .panel-rig .sclist > li .btnbx .btn-cstar {
                font-size: 1.3rem;
            }

    .uif .panel-rig .sclist .float-bar {
        background-color: white;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        position: absolute;
        top: 0px;
        transform: scale(0.8) translate(-15px,-10px);
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .uif .panel-rig .sclist .float-bar .circleProgbar {
            width: 100%;
            height: 100%;
            transform: scale(0.9);
        }



#editbx {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

    #editbx > form {
        width: 90%;
    }

    #editbx .head-item {
        height: 80px;
        text-align: center;
    }

    #editbx a {
        color: deepskyblue;
    }

        #editbx a:hover {
            text-decoration: underline;
        }


    #editbx .layui-input {
        width: 230px;
    }

    #editbx .layui-form-label {
        font-size: 0.9rem;
        color: #333;
    }

    #editbx .head-item .headbox {
        width: 80px;
        height: 80px;
        display: inline-block;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        line-height: 80px;
    }

        #editbx .head-item .headbox::before {
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            color: white;
            line-height: inherit;
            font-size: 1.4rem;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.5s;
            opacity: 0;
        }

        #editbx .head-item .headbox:hover::before {
            opacity: 1;
        }

    #editbx .head-item .headimg {
        width: 100%;
        height: 100%;
    }

    #editbx .savebtnbx {
        text-align: center;
        margin-top: 60px;
    }

    #editbx #edit-save {
        width: 150px;
    }

.stepdev {
    width: 100%;
    height: 100%;
}

    .stepdev > .long {
        width: auto;
        height: 100%;
        overflow: hidden;
        position: relative;
        transition: all 1s;
        white-space: nowrap;
    }

        .stepdev > .long > div {
            display: inline-block;
            width: 400px;
            height: 100%;
            display: inline-flex;
            justify-content: space-around;
            align-items: stretch;
            flex-direction: column;
        }

    .stepdev .input-block {
        width: 100%;
        height: 35px;
        box-sizing: border-box;
        display: flex;
        line-height: 40px;
        justify-content: start;
        align-items: stretch;
    }

        .stepdev .input-block > label {
            height: 100%;
            line-height: inherit;
            flex-shrink: 0;
            color: #444;
            text-align: right;
            padding-right: 5px;
            color: orange;
            white-space: nowrap;
        }

        .stepdev .input-block input[type="text"] {
            flex-grow: 1;
            height: 100%;
            line-height: inherit;
            width: 270px;
            color: #333;
            outline: none;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding-left: 5px;
        }

            .stepdev .input-block input[type="text"]::-webkit-input-placeholder {
                font-size: 0.8rem;
            }

    .stepdev .title {
        padding-left: 20px;
        color: #888;
        font-size: 1.1rem;
    }

    .stepdev .content {
        padding-left: 20px;
    }

    .stepdev .opers {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .stepdev .opers button {
            width: 150px;
        }

/*修改密码弹出层*/
#alterpwdbx {
    padding-top: 10px;
    padding-left: 10px;
}

    #alterpwdbx .title {
        font-size: 1.3rem;
        font-weight: bold;
        color: #6e6e6e;
        margin-bottom: 20px;
    }

    #alterpwdbx .submit-item {
        text-align: center;
        margin-top: 50px;
    }

    #alterpwdbx .layui-form-item .layui-input-inline {
        width: 245px;
    }

    #alterpwdbx .submit {
        width: 120px;
    }
